<template>
	<jk-dialog
		v-model="showDialog"
		:title="checkData.date ? `${checkData.date} / ${checkData.shiftItem.shiftName} / ${checkData.scheduleGroupName}` : '暂无'"
		width="1200px"
		:fullscreen="false"
		:show-confirm-btn="false"
		:show-cancel-btn="false"
		:show-close-btn="true"
		@on-visible-change="onVisibleChange"
		@on-close="onVisibleChange(false)"
	>
		<header class="flex-center margin-bottom-4">
			<el-radio-group v-model="modeVal" size="large" class="item-gap">
				<el-radio-button label="empModeView">
					<span class="el-icon-user"></span>
					<span>人员-维度</span>
				</el-radio-button>
				<el-radio-button label="postModeView">
					<span class="el-icon-postcard"></span>
					<span>岗位-维度</span>
				</el-radio-button>
			</el-radio-group>
		</header>
		<component
			:is="modeVal"
			border="none"
			:readonly="readonly"
			:stripe="false"
			:check-data="checkData"
		></component>
	</jk-dialog>
</template>
<script>
    import checkboxEmpDialog from './compomens/checkbox-emp-dialog';
    import checkboxMachineDialog from '../empMachine/components/schedule-checkbox-machine-dialog';
    import setSpinGroupDialog from './compomens/set-spin-group-dialog';
    import empModeView from './compomens/view-type/emp-mode-view';
    import postModeView from './compomens/view-type/post-mode-view/index';

    export default {
        components: {
            postModeView,
            empModeView,
            setSpinGroupDialog,
            checkboxMachineDialog,
            checkboxEmpDialog
        },
        props: {
            readonly: {
                type: Boolean,
                default: false
            },
            dialogState: {
                type: Boolean,
                default: false
            },
            checkData: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        data() {
            return {
                showDialog: false,
                modeVal: ''
            };
        },
        methods: {
            onVisibleChange(e) {
                if (!e) {
                    this.modeVal = '';
                }
                this.$emit('on-visible-change', e);
            }
        },
        watch: {
            dialogState(newVal) {
                this.showDialog = newVal;
                if (newVal) {
                    this.modeVal = 'empModeView';
                }
            }
        }
    };
</script>
